<template>
  <div>
    <div class="head">
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-search v-model="value" placeholder="请输入搜索关键词" />
          <van-button
            type="primary"
            size="small"
            color="red"
            @click="goCartList(value)"
            >搜索</van-button
          >
        </template>
      </van-nav-bar>
    </div>
    <div style="padding-left: 0.15rem">
      <div class="show">
        <p>热门搜索</p>
        <p @click="showSpan">{{ show }}</p>
      </div>
      <div v-if="span">
        <span
          v-for="(item, index) in RightList"
          class="hot"
          :key="index"
          @click="goCartList(item.keyword)"
          >{{ item.keyword }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getHotword } from "../api/kind";
import { Button, Toast } from "vant";
Vue.use(Button);
Vue.use(Toast);

export default {
  data() {
    return {
      RightList: [],
      value: "",
      span: true,
      show: "隐藏",
    };
  },
  created() {
    getHotword().then((res) => {
      console.log(res.data.data);
      this.RightList = res.data.data;
    });
  },
  methods: {
    goCartList(keyword) {
      if (keyword.trim() != "") {
        this.value = keyword;
        this.$router.push("/CartList/" + keyword);
      } else {
        Toast("请输入内容");
      }
    },
    showSpan() {
      this.span = !this.span;
      if (this.span) {
        this.show = "隐藏";
      } else {
        this.show = "显示";
      }
    },
  },
};
</script>

<style scoped>
::v-deep .van-search {
  height: 100%;
  width: 85%;
}
::v-deep .van-nav-bar__right {
  left: 0.2rem;
}
.show {
  display: flex;
  justify-content: space-between;
  padding: 0 0.15rem;
  margin: 0.1rem 0;
}
.show p:nth-child(2) {
  color: cadetblue;
}
.hot {
  display: inline-block;
  width: 0.6rem;
  font-size: 12px;
  background-color: rgb(220, 206, 206);
  border-radius: 0.3rem;
  text-align: center;
  margin: 0 0.1rem;
}
</style>